<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" :size="20" @click="toggleCollapse">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li v-for="(item, index) in selectedMenu" :key="item.path" class="tab flex-box"
                    :class="{ selected: item.path === route.path }">
                    <el-icon size="14">
                        <component :is="item.icon" />
                    </el-icon>
                    <router-link class="text flex-box" :to="{ path: item.path }">
                        {{ item.name }}
                    </router-link>
                    <el-icon size="12" class="close" @click.stop="closeTab(item, index)">
                        <Close />
                    </el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link flex-box">
                    <el-avatar :src="userInfo.avatar" />
                    <p class="user-name">{{ userInfo.name }}</p>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="cancel">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
</template>

<script setup name="NavHeader">
import { useRoute, useRouter } from 'vue-router'
import { useMenuStore } from '@/stores/menu'
import { storeToRefs } from 'pinia'

const menuStore = useMenuStore()
const { selectedMenu } = storeToRefs(menuStore)
const { toggleCollapse, closeMenu } = menuStore

// 当前路由对象
const route = useRoute()
const router = useRouter()
console.log(route)
const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'))


function closeTab(item, index) {
    // 删除选中的菜单
    closeMenu(item)
    // 如果当前路由不是选中的菜单，则不进行操作
    if (route.path !== item.path) {
        return
    }
    // 如果只有一个菜单，则跳转到首页
    if (!selectedMenu.value.length) {
        router.push('/')
    }
    // 如果选中的菜单为最后一个，则跳转到上一个菜单
    else if (index === selectedMenu.value.length) {
        router.push(selectedMenu.value[index - 1].path)
    }
    // 如果选中的菜单不是最后一个，则跳转到下一个菜单
    else {
        router.push(selectedMenu.value[index].path)
    }
}

// 退出登录
const handleCommand = (command) => {
    if (command === 'cancel') {
        localStorage.removeItem('pz_token')
        localStorage.removeItem('pz_userInfo')
        localStorage.removeItem('menu')
        router.push('/login')
    }
}
</script>

<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background-color: #fff;
    padding-right: 25px;

    .header-left {
        height: 100%;

        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }


        .tab {
            height: 100%;
            padding: 0 10px;

            .text {
                margin-left: 0 5px;
            }

            // a 是<router-link>编译后的标签
            a {
                height: 100%;
                color: #333;
                font-size: 15px;
                padding: 0 5px;
            }

            .close {
                visibility: hidden; // 让类名为 .close 的元素默认隐藏，但仍占据布局空间。
            }

            // & 表示父选择器
            // 当某个元素同时拥有 .tab 和 .selected 类时，才会应用这些样式
            &.selected {
                background-color: #f5f5f5;

                .text {
                    color: #4091ff;
                }

                a {
                    color: #4091ff;
                }
            }
        }

        .tab:hover {
            background-color: #f5f7fa;
            cursor: pointer;

            .close {
                visibility: inherit; // 让类名为 .close 的元素显示
                cursor: pointer;
                color: #000;
            }
        }
    }

    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }

    li {
        height: 100%;
    }

}
</style>